/*
 * @Descripttion: 
 * @Version: 
 * @Author: 王传宝
 * @Date: 2023-03-02 16:37:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-03-04 09:55:57
 */
import React from "react";
import { TabBar } from "antd-mobile";
import {
  AppOutline,
  HeartOutline,
  FilterOutline,
  UserOutline,
  TruckOutline,
} from 'antd-mobile-icons'
import Style from './App.module.scss'
import { Routes, Route, Navigate, useNavigate } from "react-router-dom"
import CategoryView from './views/CategoryView'
import CategoryListView from './views/CategoryListView'
import DetailView from './views/DetailView'
import HomeView from './views/HomeView'
import LoginView from './views/LoginView'
import MineView from './views/MineView'
import SearchView from './views/SearchView'
import ShoppingCar from './views/ShoppingCar'
import SearchDetail from './views/SearchDetail'
import Recommend from './views/Homes/recommend'
import Ranking from './views/Homes/Ranking'
import BuyView from "./views/BuyView";
import FamilyLife from "./views/Homes/FamilyLife";

const App = () => {
  var navigate = useNavigate();
  const tabs = [
    {
      key: "/home/recommend",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/category",
      title: "分类",
      icon: <FilterOutline />,
    },
    {
      key: "/buy",
      title: "值得买",
      icon: <TruckOutline />,
    },
    {
      key: "/shoppingCar",
      title: "购物车",
      icon: <TruckOutline />,
    },
    {
      key: "/mine",
      title: "个人",
      icon: <UserOutline />,
    },
  ];
  return (
    <div className={Style.wrapper}>
      <div className={Style.content}>
        <Routes>
          <Route path="/" element={<Navigate to="/home/recommend"></Navigate>}></Route>
          <Route path="/category" element={<CategoryView></CategoryView>}></Route>
          <Route path="/categorylist/:id" element={<CategoryListView></CategoryListView>}></Route>
          <Route path="/detail/:id" element={<DetailView></DetailView>}></Route>
          <Route path="/home" element={<HomeView></HomeView>}>
            {/* 推荐页面 */}
            <Route
              path="/home/recommend"
              element={<Recommend></Recommend>}
            ></Route>
            <Route
              path="/home/FamilyLife"
              element={<FamilyLife></FamilyLife>}
            ></Route>
          </Route>
          {/* 榜单页面 */}
          <Route path="/RanKing/:id" element={<Ranking></Ranking>}></Route>
          <Route path="/login" element={<LoginView></LoginView>}></Route>
          <Route path="/mine" element={<MineView></MineView>}></Route>
          <Route path="/search" element={<SearchView></SearchView>}></Route>
          <Route path="/search/searchDeatil" element={<SearchDetail></SearchDetail>}></Route>
          <Route path="/shoppingCar" element={<ShoppingCar></ShoppingCar>}></Route>
          <Route path="/buy" element={<BuyView></BuyView>}></Route>
        </Routes>
      </div>
      <div className={Style.footer}>
        <TabBar
          onChange={(key) => {
            navigate(key);
          }}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default App;
